<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  href="viewer.css" rel="stylesheet">
    <script src="viewer.js"></script>
</head>
<body>
    <div>
        <img id="image" src="img/a1.png" alt="Picture">
    </div>
    <div>
        <ul id="images">
            <li><img src="img/a2.png" alt="Picture 1"></li>
            <li><img src="img/a3.png" alt="Picture 2"></li>
            <li><img src="img/a4.png" alt="Picture 3"></li>
        </ul>
    </div>
<script>
    const viewer = new Viewer(document.getElementById('image'));
    const gallery = new Viewer(document.getElementById('images'));
</script>
</body>
</html>